import React, { useState } from 'react';
import { Table, Popconfirm, Input } from 'antd';
import './table.scss';

const { Search } = Input;

const UpdateTable = () => {
  const [searchText, setSearchText] = useState("");
  const [pageSize, setPageSize] = useState(10);
  const onSearch = (value) => {
    setSearchText(value);
  };
  const originData = [
    {
      key: '1',
      content: '应用程序1',
      document: ' ',
      date: '2021/01/12 21:00',
      updater: '尚玉晨',
      size: '20kb'
    },
    {
      key: '2',
      content: '应用程序2',
      document: ' ',
      date: '2021/01/13 22:00',
      updater: '毛济慈',
      size: '30kb'
    },
    // 补充其他数据...
  ];
  const filteredData = originData.filter(item =>
    Object.values(item).some(value =>
      value && String(value).toLowerCase().includes(searchText.toLowerCase()) // 先检查 value 是否存在
    )
  );

  const handleDownload = (record) => {
    console.log('下载记录：', record);
    // 下载逻辑
  };

  const handleDelete = (key) => {
    console.log('删除记录：', key);
    // 删除逻辑
  };

  const columns = [
    { title: '内容', dataIndex: 'content', key: 'content', align: 'left', width: 100 },
    { title: '文件', dataIndex: 'document', key: 'document', align: 'left', width: 130 },
    { title: '日期', dataIndex: 'date', key: 'date', align: 'left', width: 150 },
    { title: '更新者', dataIndex: 'updater', key: 'updater', align: 'left', width: 80 },
    { title: '大小', dataIndex: 'size', key: 'size', align: 'left', width: 80 },
    {
      title: "操作",
      key: "action",
      align: "center",
      width: 180,
      render: (_, record) => (
        <>
          <a onClick={() => handleDownload(record)}>下载</a>
          <Popconfirm
            title="确认删除？"
            onConfirm={() => handleDelete(record.key)}
          >
            <a style={{ marginLeft: 8 }}>删除</a>
          </Popconfirm>
        </>
      )
    }
  ];

  return (
    <div style={{ padding: '16px' }}>
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', marginTop: '13px' }}>
        <div style={{ width: '10px', height: '20px', background: '#1890ff', marginRight: '10px' }} />
        <h3 style={{ margin: 0 }}>导出资料档案</h3>
        <div style={{ marginLeft: 'auto', marginRight: "15px" }}>
          <Search 
            placeholder="搜索" 
            onSearch={setSearchText} 
            onChange={(e) => setSearchText(e.target.value)}
            style={{ width: 200 }} 
          />
        </div>
      </div>
      <Table
        columns={columns}
        bordered
        dataSource={filteredData}
        rowKey="key"
        pagination={{
          pageSize,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50'],
          onShowSizeChange: (current, size) => setPageSize(size),
        }}
        className="custom-table"
        style={{ marginLeft: '5px', marginRight: '25px', marginTop: '0px' }}
      />
    </div>
  );
};

export default UpdateTable;
